<template>
  <div class="symain">
    <!--  -->
    <div class="mainboxgj">
      <!-- 分左边 -->
      <div class="mainleftbox">
        <div class="bannerboxs">
          <div class="bakck" @click="goback">返回</div>
          <div class="bakcks" @click="startBiaoZhu">{{
            addflag == false ? '添加定位点' : '添加中...'
          }}</div>

          <div class="bakcks" @click="isDraggflag = !isDraggflag">{{
            isDraggflag == false ? '拖动点位' : '取消拖动'
          }}</div>
          <div class="bannertitlebox">
            <div class="yxdesbox">{{ imgsrcs[0].medicineAtlasName }}</div>
            <div class="yxdesboxs">数量({{ imgsrcs.length }})</div>
          </div>
        </div>
        <div
          class="boxmain"
          @mousedown="onMouseDown"
          @mouseup="onMouseUp"
          @mousemove="onMouseMove"
        >
          <div class="box" ref="box">
            <canvas
              id="myCanvasadmin"
              :width="hbwidth"
              :height="hbheight"
              :style="{
                backgroundColor: atlasTypeName === '插画' ? '#ffff' : 'black',
              }"
            ></canvas>
            <!-- <canvas id="myCanvasadmin" width="1660" height="550"></canvas> -->
          </div>
        </div>
        <div class="lboxmain">
          <div class="lbox">
            <div
              v-for="item in imgsrc"
              :key="item.medicineAtlasImgId"
              class="lboxitem"
              @click="tagdcom(item.medicineAtlasImgId)"
            >
              <img
                :src="`${base + item.imgUrl}`"
                v-if="
                  imgclass.includes(item.imgClassificationName) ||
                  imgclass == '全部'
                "
              />
              <div class="msx" v-if="item.medicineAtlasImgId == dcomid"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分右边 -->
      <div class="bocd">
        <div class="gnbocdtop">
          <div class="xugn">
            <div class="xugname">解剖面：</div>

            <div>
              <a-select
                v-model="imgclass"
                :options="imgclassdata"
                :field-names="fieldName"
                :style="{ width: '230px' }"
                placeholder="请选择解剖面"
              />
            </div>
          </div>
        </div>
        <div class="gnbocd">
          <div class="gnbocdname">解剖部位</div>
          <div class="gnboxmain beautifulScroll">
            <div class="gnboxitem jgdovx">
              所有
              <a-switch v-model="allflag" @change="changecsd()" />
            </div>
            <!-- {{ jiegoudata }} -->
            <div v-for="(item, index) in anatomicStructure" :key="index">
              <div ref="cs" class="jgdovx gnboxitem" v-if="flagfn(item)">
                {{ item.anatomicStructureName }}
                <a-switch v-model="item.flag" @change="upflags(item)" />
              </div>
            </div>
          </div>
        </div>
        <div class="gnbottom">
          <div class="tool" @click="tagdcoms('-1')">
            <img src="@/assets/images/letac.png" alt="" class="normal" />
            <img src="@/assets/images/let.png" alt="" class="active" />
          </div>
          <div class="mentox"
            >影像页数:<span>{{ findindex() + 1 }}/{{ imgsrc.length }}</span>
          </div>
          <div class="tool" @click="tagdcoms('1')">
            <img src="@/assets/images/rght.png" alt="" class="normal" />
            <img src="@/assets/images/rghtac.png" alt="" class="active" />
          </div>
        </div>
      </div>

      <!-- <div class="bocd">
        <div>
          <a-card :style="{ width: '360px' }" title="功能菜单">
            <template #extra>
              <a-link></a-link>
            </template>

            <div class="bocd">
              <a-button type="primary" @click="startBiaoZhu">开始标注</a-button>
              <a-button type="primary" @click="clearCache">重置标记</a-button>
              <a-button type="primary" @click="toggleLinesAndText"
                >显示旗标</a-button
              >
              <a-button type="primary" @click="goback">结束添加</a-button>
            </div>
          </a-card>
        </div>
      </div> -->
    </div>
    <!-- <a-spin :loading="loading" tip="This may take a while..."></a-spin> -->
    <!-- 添加标记的输入框 -->
    <div
      v-if="currentMarker && canBiaoZhu"
      class="input-container edit-panel"
      :style="{ left: editPanelX + 'px', top: editPanelY + 'px' }"
    >
      <a-form ref="addModel" :rules="rules" :model="addForm">
        <a-form-item field="currentText" label="名称">
          <a-input
            @change="changevalues"
            v-model="addForm.currentText"
            placeholder="请输入标记点名称"
          />
        </a-form-item>
        <a-form-item field="value" label="部位">
          <a-select
            @change="changevalue"
            v-model="addForm.value"
            :options="optionsdata"
            :field-names="fieldNames"
            :style="{ width: '320px' }"
            placeholder="请选择解剖部位"
          />
        </a-form-item>
      </a-form>

      <div class="gncd">
        <a-button @click="addTextAndCompleteMarker">添加</a-button>
        <a-button @click="confirmaddTextAndCompleteMarker">取消</a-button>
        <a-button @click="visible = true">补充知识点</a-button>
      </div>
    </div>

    <!-- 编辑标记的面板 -->
    <div
      v-if="editingMarker"
      class="edit-panel"
      :style="{ left: editPanelX + 'px', top: editPanelY + 'px' }"
    >
      <a-form ref="addModels" :rules="ruless" :model="addForm">
        <a-form-item field="currentText" label="名称">
          <a-input
            v-model="addForm.currentText"
            placeholder="请输入标记点名称"
          />
        </a-form-item>
      </a-form>
      <div class="gncd">
        <a-button @click="confirmEdit">确认</a-button>
        <a-button @click="cancelEditing">取消</a-button>
        <!-- 新增取消按钮 -->
        <a-button @click="deleteMarker">删除</a-button>
        <a-button @click="upcontent">修改知识点</a-button>
      </div>
    </div>
    <!-- 知识点弹窗 -->

    <a-modal
      v-model:visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="850px"
    >
      <template #title> 补充知识点 </template>
      <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 300px; overflow-y: hidden"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />

        <!-- <v-md-editor v-model="html" height="400px"></v-md-editor> -->
      </div>
    </a-modal>
    <!-- 加载页测试 -->
    <div class="loader-container" v-if="loding">
      <div class="loader"></div>
      <p>加载中</p>
    </div>
  </div>
</template>

<script>
  import '@wangeditor/editor/dist/css/style.css'; // 引入 css

  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import {
    jpList,
    addPoint,
    getPoint,
    getPointnew,
    delPoint,
    pointContent,
    getContent,
    addimg,
    getContentid,
    pointsUpdate,
  } from '@/api/tplist.ts';
  import { Message } from '@arco-design/web-vue';
  import { color } from 'echarts';
  export default {
    components: { Editor, Toolbar },
    props: {
      imgsrcs: {
        type: [],
      },
      medicineAtlasId: {},
      imgclassdata: {
        type: [],
      },
      atlasTypeName: {
        type: String,
      },
    },
    data() {
      return {
        allflag: true,
        jiegoudata: [],
        rightMarkers: [],
        leftMarkers: [],
        anatomicStructure: [],
        hbheight: '',
        hbwidth: '',
        addForm: {
          currentText: '',
          value: '',
        },
        editor: null,
        html: '',
        toolbarConfig: {
          excludeKeys: [
            // 排除菜单组，写菜单组 key 的值即可
            'group-video', //去掉视频
          ],
        },

        editorConfig: { MENU_CONF: {}, placeholder: '请输入内容...' },
        mode: 'default', // or 'simple'
        imgclass: '全部',
        markingPointsId: [],
        value: '',
        optionsdata: [],
        fieldNames: {
          value: 'anatomicStructureId',
          label: 'anatomicStructureName',
        },
        fieldName: {
          value: 'imgClassificationName',
          label: 'imgClassificationName',
        },
        imgclassdatas: '',
        canBiaoZhu: false,
        pointColor: '65FF00',
        pointSize: 10,
        imgScale: 1,
        zoomStep: 0.1,
        markers: [],
        canvas: null,
        ctx: null,
        img: null,
        pointName: '',
        base: window.config.VUE_APP_IMG_API,
        // imgWidth: 1300,
        // imgHeight: 500,
        imgWidth: 480,
        imgHeight: 606,
        currentText: '',
        currentMarker: null,
        showLinesAndText: true,
        isDraggflag: false,
        isDragging: false,
        isDraggings: false,
        startDragX: 0,
        startDragY: 0,
        imgOffsetX: 0,
        imgOffsetY: 0,
        loding: false,
        isSpacePressed: false,
        hoveredMarker: null,
        editingMarker: false,
        editPanelX: 0,
        editPanelY: 0,
        addflag: false,
        dcomid: '',
        visible: false,
        upflag: false,
        rules: {
          currentText: [
            {
              required: true,
              message: '请输标记点名称',
            },
          ],
          value: [
            {
              required: true,
              message: '请选择截屏部位',
            },
          ],
        },
        ruless: {
          currentText: [
            {
              required: true,
              message: '请输标记点名称',
            },
          ],
        },
      };
    },
    watch: {
      imgsrcs: {
        handler(i) {
          if (i) {
            console.log('接受到传输sss', i[0]);

            this.dcomid = i[0].medicineAtlasImgId;
            this.imgsrc = this.imgsrcs;
          }
        },
        deep: true,
        immediate: true,
      },
      imgclass: {
        handler(i) {
          if (i) {
            console.log('改变数据', i);
            // this.imgsrc = this.imgsrcs;
            // this.dcomid = i[0].medicineAtlasImgId;
            this.imgsrc = [];
            if (i == '全部') {
              this.imgsrc = this.imgsrcs;
            } else {
              this.imgsrcs.forEach((item) => {
                if (i.includes(item.imgClassificationName)) {
                  this.imgsrc.push(item);
                }
              });
            }

            this.dcomid = this.imgsrc[0].medicineAtlasImgId;
            this.tagdcom(this.dcomid);
          }
        },
        deep: true,
        immediate: true,
      },
      imgclassdata: {
        handler(i) {
          if (i) {
            // this.imgclassdatas = [];
            // i.forEach((item) => {
            //   this.imgclassdatas.push(item.imgClassificationName);
            // });
            // if (this.imgclassdatas.length > 0) {
            //   this.imgclassdatas = this.imgclassdatas.toString();
            //   this.imgclass = this.imgclassdatas;
            // }
            // console.log(
            //   '改变数据',
            //   i,
            //   this.imgclassdatas,
            //   this.imgclassdatas.toString()
            // );
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      // 鼠标按下事件
      onMouseDown(event) {
        if (this.hoveredMarker && this.isDraggflag) {
          // 只有当 hoveredMarker 存在时才进入拖拽模式
          console.log('当前点击的是', this.hoveredMarker);

          // 记录开始位置并标记开始拖拽
          this.isDraggings = true;
          this.startX = event.clientX;
          this.startY = event.clientY;
        }
      },

      // 鼠标释放事件
      onMouseUp() {
        if (this.isDraggings && this.isDraggflag) {
          // 停止拖拽
          this.isDraggings = false;
          console.log('拖拽结束，当前标记:', this.hoveredMarker);
          pointsUpdate({
            markingPointsId: this.hoveredMarker.markingPointsId,
            markingPoints: JSON.stringify({
              bsdata: [
                {
                  color: this.hoveredMarker.color,
                  x: this.hoveredMarker.x,
                  y: this.hoveredMarker.y,
                  text: this.hoveredMarker.text,
                },
              ],
            }),
          }).then((res) => {
            if (res.code == 200) {
              console.log('更新存储成功');
            }
          });
        }
      },

      // 鼠标移动事件
      onMouseMove(event) {
        if (this.isDraggings && this.hoveredMarker && this.isDraggflag) {
          // 计算鼠标移动的距离
          const deltaX = event.clientX - this.startX;
          const deltaY = event.clientY - this.startY;

          // 更新数据的 x 和 y
          this.hoveredMarker.x += deltaX;
          this.hoveredMarker.y += deltaY;

          // 更新起始位置为当前鼠标位置，保持拖拽效果
          this.startX = event.clientX;
          this.startY = event.clientY;
          this.draw(); // 绘制更新
        }
      },
      tagdcoms(i) {
        const index = this.imgsrc.findIndex(
          (item) => item.medicineAtlasImgId == this.dcomid
        );
        if (i == 1) {
          if (this.imgsrc[index + 1]) {
            this.dcomid = this.imgsrc[index + 1].medicineAtlasImgId;
            this.tagdcom(this.dcomid);
            this.draw();
          }
        } else {
          if (this.imgsrc[index - 1]) {
            this.dcomid = this.imgsrc[index - 1].medicineAtlasImgId;
            this.tagdcom(this.dcomid);
            this.draw();
          }
        }
      },
      findindex() {
        return this.imgsrc.findIndex(
          (item) => item.medicineAtlasImgId == this.dcomid
        );
      },
      flagfn(i) {
        // console.log('当前id是否存在本图中', i.anatomicStructureId);
        return this.markers.some((item) => {
          let itemsArray = [];

          if (typeof item.medicineAtlasImgId == 'string') {
            itemsArray = item.medicineAtlasImgId.split(',').map(Number);
            // 在这里可以继续对itemsArray进行后续操作
          } else {
            // 处理item.medicineAtlasImgId不是字符串的情况，比如抛出错误或者给予默认值等
            itemsArray.push(item.medicineAtlasImgId);
          }
          if (itemsArray.includes(this.dcomid)) {
            return item.bsdata.some(
              (itemd) => itemd.anatomicStructureId == i.anatomicStructureId
            );
          }
          return false;
        });
      },
      // 全选
      changecsd() {
        this.markers.forEach((maker) => {
          maker.bsdata.forEach((bsitem) => {
            bsitem.flag = this.allflag;
          });
        });
        this.anatomicStructure.forEach((jg) => {
          jg.flag = this.allflag;
        });
        this.draw();
      },
      // 修改结构flga
      upflags(i) {
        // 处理一下数据

        this.markers.some((item) => {
          item.bsdata.some((itemd) => {
            if (itemd.anatomicStructureId == i.anatomicStructureId) {
              itemd.flag = i.flag;
            }
          });
          // const itemsArray = item.medicineAtlasImgId.split(',').map(Number);
          // if (itemsArray.includes(this.dcomid)) {

          // }
        });

        // 判断是否存在 flag 为 false 的项
        this.allflag = !this.anatomicStructure.some(
          (item) => item.flag === false
        );
        this.draw();
        // console.log('当前格式', item.flag);
      },
      // 赋值
      changevalues() {
        this.currentText = this.addForm.currentText;
      },
      changevalue() {
        this.value = this.addForm.value;
      },
      // 修改只是点
      upcontent() {
        getContent({
          markPointsId: this.markingPointsId,
        }).then((res) => {
          if (res.code == 200) {
            this.html = res.data.pointContent;
            this.visible = true;
            this.upflag = true;
          }
        });

        // 先获取知识点内容
      },
      handleOk() {
        // 修改补充知识点
        // console.log('提交补充知识点', this.html);
        if (this.upflag) {
          pointContent({
            pointContent: this.html,
            markingPointsId: this.markingPointsId,
          }).then((res) => {
            if (res.code == 200) {
              this.html = '';
              this.visible = false;
              this.upflag = false;
            }
          });
        }
      },
      handleCancel() {
        this.visible = false;
      },
      onCreated(editor) {
        this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      },
      cancelEditing() {
        this.editingMarker = false;
        this.draw();
      },
      checkHover(x, y) {
        const { markers, pointSize, imgScale } = this;
        const margin = 150; // 画布边缘的间距

        const mergedBsdata = markers.filter((item) =>
          item.medicineAtlasImgId.includes(this.dcomid)
        );

        const targetElement = {};
        targetElement.bsdata = mergedBsdata.reduce((acc, item) => {
          acc.push(...item.bsdata);
          return acc;
        }, []);

        if (targetElement) {
          this.hoveredMarker = targetElement.bsdata.find((marker) => {
            // 新方法计算新的偏移量
            const canvas = this.canvas;
            const ctx = this.ctx;

            // 计算缩放后的图像尺寸
            const scaledWidth = this.imgWidth * this.imgScale;
            const scaledHeight = this.imgHeight * this.imgScale;

            // 计算图像在画布上的偏移量
            const xOffset = (canvas.width - scaledWidth) / 2;
            const yOffset = (canvas.height - scaledHeight) / 2;

            const markerX = marker.x * this.imgScale + xOffset;
            const markerY = marker.y * this.imgScale + yOffset;

            //
            // console.log('标记点检查', x, markerX, y, marker.y);
            // 检查是否悬停在标记点上
            if (
              Math.hypot(x - markerX, y - markerY) <
              (pointSize / 2) * imgScale
            ) {
              this.hoveredMarker = marker;
              // console.log('悬停在标记点', this.hoveredMarker);
              return true;
            }
            // 检查是否悬停在文本上
            const text = marker.text || '';
            ctx.font = `12px Arial`; // 根据实际使用的字体进行设置
            const textMetrics = ctx.measureText(text);
            const textWidth = textMetrics.width;

            // 使用 marker.textX 和 marker.textY
            const textX = marker.textX;
            const textY = marker.textY;

            const textHeight = 14 * imgScale;

            // 计算文本的边界框
            const textBoundingBox = {
              left: textX - textWidth, // 左边界
              right: textX + textWidth, // 右边界
              top: textY - textHeight, // 上边界
              bottom: textY, // 下边界
            };

            if (
              x >= textBoundingBox.left &&
              x <= textBoundingBox.right &&
              y >= textBoundingBox.top &&
              y <= textBoundingBox.bottom
            ) {
              this.hoveredMarker = marker;
              // console.log('悬停在文本上', x, textBoundingBox.left);
              return true;
            }

            return false;
          });
        }
      },

      change() {
        console.log('选择了', this.imgclass);
        // this.draw();
      },

      handleMouseMove(e) {
        // console.log('检测到移动鼠标', e);

        const canvasX = e.offsetX;
        const canvasY = e.offsetY;

        if (this.isDragging) {
          this.dragMove(e); // 拖拽逻辑
        } else {
          if (this.isDraggings) {
            return;
          }
          this.checkHover(canvasX, canvasY); // 其他鼠标移动逻辑（例如检查悬停）
          this.draw(); // 绘制更新
        }
      },
      handleCanvasClick(e) {
        // console.log('点击了文字', this.canBiaoZhu)
        if (this.canBiaoZhu) {
          // console.log('点击了文字2', this.canBiaoZhu)
          const canvasX = e.offsetX;
          const canvasY = e.offsetY;

          const imgX =
            (canvasX -
              (this.canvas.width / 2 - (this.imgWidth * this.imgScale) / 2)) /
            this.imgScale;
          const imgY =
            (canvasY -
              (this.canvas.height / 2 - (this.imgHeight * this.imgScale) / 2)) /
            this.imgScale;
          this.createMarker(imgX, imgY);
          this.editPanelX = e.clientX; // 可以保留 clientX/y，用于显示面板
          this.editPanelY = e.clientY;
        } else if (this.hoveredMarker) {
          console.log('当前点击的是', this.hoveredMarker);

          //测试开始代码
          // const mergedBsdata = this.markers.filter((item) =>
          //   item.medicineAtlasImgId.includes(this.dcomid)
          // );

          // const targetElement = {};
          // targetElement.bsdata = mergedBsdata.reduce((acc, item) => {
          //   acc.push(...item.bsdata);
          //   return acc;
          // }, []);
          // const mbindex = targetElement.bsdata.findIndex(
          //   (marker) => marker == this.hoveredMarker
          // );
          // const index = this.markers.findIndex((item) =>
          //   item.medicineAtlasImgId.includes(this.dcomid)
          // );
          // this.markers[index].bsdata[mbindex].lintextshow = true;
          // this.markers[index].bsdata[mbindex + 1].lintextshow = false;
          // this.hoveredMarker.lintextshow = true;
          this.draw(this.hoveredMarker);
          // 测试结束代码
          this.currentMarker = this.hoveredMarker;
          this.currentText = this.currentMarker.text;
          this.editingMarker = true;
          this.addForm.currentText = this.currentMarker.text;
          this.pointName = this.currentMarker.text;
          this.markingPointsId = this.currentMarker.markingPointsId;

          // console.log(
          //   '走的修改接口要修改的文字',
          //   this.currentText,
          //   this.markingPointsId
          // );
          this.editPanelX = e.clientX; // 可以保留 clientX/y，用于显示面板
          this.editPanelY = e.clientY;
        }
      },
      createMarker(x, y) {
        if (this.canBiaoZhu) {
          this.addflag = true;
          this.currentMarker = { x, y, color: this.pointColor };
          this.draw();
        }
      },
      startBiaoZhu() {
        this.addflag = true;
        this.canBiaoZhu = true;
        this.currentMarker = null;
        this.editingMarker = false;
      },
      addTextAndCompleteMarker() {
        this.$refs.addModel.validate(async (errors) => {
          if (!errors) {
            this.editingMarker = false;
            if (this.currentText.trim() === '') return;
            if (this.currentMarker) {
              let color = [
                '59E000',
                '00E0B3',
                '2F8CEA',
                'F56200',
                'FFBD79',
                'B788E4',
                'FF8486',
              ];

              const colorMap = this.optionsdata.map((item, index) => ({
                structureId: item.anatomicStructureId,
                color: color[index % color.length],
              }));
              const result = colorMap.find(
                (item) => item.structureId == this.value
              );

              this.currentMarker.text = this.currentText.trim();
              if (result.color) {
                this.currentMarker.color = result.color;
              } else {
                this.currentMarker.color = '59E000';
              }

              // console.log('结构data', this.currentMarker.color);
              this.currentText = '';
              //颜色代码

              // 假设 this.markers 是一个数组，this.dcomid 是要查找的 dcomid，this.currentMarker 是要添加的新数据
              const existingMarker = this.markers.find(
                (marker) => marker.dcomid === this.dcomid
              );

              if (existingMarker) {
                // 如果找到相同 dcomid 的对象，直接向其 bsdata 数组中添加新的数据
                existingMarker.bsdata.push(this.currentMarker);
              } else {
                // 如果没有找到相同 dcomid 的对象，创建新的对象并添加到 markers 数组中
                this.markers.push({
                  dcomid: this.dcomid,
                  bsdata: [this.currentMarker],
                });
              }
              // 添加图像点位

              addPoint({
                // medicineAtlasImgName: urlParts[urlParts.length - 1],
                medicineAtlasImgId: this.dcomid,
                pointsName: this.currentMarker.text,
                medicineAtlasId: this.medicineAtlasId,
                pointContent: this.html,
                markingPoints: JSON.stringify({
                  dcomid: this.dcomid,
                  bsdata: [this.currentMarker],
                }),
                anatomicStructureId: this.value,
              }).then((res) => {
                if (res.code == 200) {
                  this.html = '';
                  console.log('点位添加成功', res.code);
                  this.getPoints();
                  this.currentMarker = null;
                  // this.saveMarkers();
                  this.canBiaoZhu = false;
                  this.currentMarker = '';
                  this.addForm.currentText = '';
                  // this.draw();
                } else {
                  this.getPoints();

                  this.currentMarker = null;
                  // this.saveMarkers();
                  this.canBiaoZhu = false;
                  this.currentMarker = '';
                  this.addForm.currentText = '';
                  // this.draw();
                }
              });
              this.$nextTick(() => {
                this.addflag = false;
              });
            }
          }
        });
      },
      confirmaddTextAndCompleteMarker() {
        this.editingMarker = false;
        this.currentText = '';
        this.addForm.currentText = '';
        this.canBiaoZhu = false;
        this.addflag = false;
      },
      confirmEdit() {
        this.$refs.addModels.validate(async (errors) => {
          if (!errors) {
            this.addflag = false;
            if (this.currentText.trim() == '') return;
            if (this.currentMarker) {
              this.currentMarker.text = this.currentText.trim();
              this.saveMarkers();
              this.editingMarker = false;
              this.currentText = '';
              this.draw();
            }
          }
        });
      },

      deleteMarker() {
        if (this.currentMarker) {
          // 重新设置当前标记和文本
          this.currentMarker = null;
          this.currentText = '';
          // this.saveMarkers(); // 保存更新后的标记
          this.editingMarker = false;
          console.log('没有获取到当前删除的id', this.markingPointsId);

          if (this.markingPointsId != '') {
            delPoint({ markPointsId: this.markingPointsId }).then((res) => {
              if (res.code == 200) {
                console.log('删除成功');
                this.markingPointsId = '';
                this.getPoints();
                this.draw(); // 重新绘制画布
              }
            });
          }
        }
      },

      draw(mbmarker) {
        // console.log('执行draw');

        // if (this.$refs.box) {
        //   this.hbheight = this.$refs.box.offsetHeight;
        //   this.hbwidth = this.$refs.box.offsetWidth;
        // }

        // 确保图片加载完成且宽度非零
        // if (!this.img.complete || this.img.naturalWidth === 0) {
        //   return; // 如果图片未加载完成或宽度为零，直接返回
        // }

        const canvas = this.canvas; // 获取画布对象
        const ctx = this.ctx; // 获取绘图上下文
        const img = this.img; // 获取图片对象
        // console.log('图片信息2', this.imgWidth, this.imgHeight);
        // 确保画布、绘图上下文和图片对象存在
        if (ctx && img && canvas) {
          ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
          const aspectRatio = this.img.naturalWidth / this.img.naturalHeight;
          const canvasAspectRatio = canvas.width / canvas.height;

          // 设置最大宽度和高度
          const maxWidth = canvas.width * 0.999; // 画布宽度的90%
          const maxHeight = canvas.height * 0.999; // 画布高度的90%

          if (canvasAspectRatio > aspectRatio) {
            this.imgScale = Math.min(maxHeight / this.img.naturalHeight, 1);
          } else {
            this.imgScale = Math.min(maxWidth / this.img.naturalWidth, 1);
          }

          // 检查当前缩放后的宽度和高度，如果小于画布大小，则按比例放大
          const currentScaledWidth = this.img.naturalWidth * this.imgScale;
          const currentScaledHeight = this.img.naturalHeight * this.imgScale;

          if (
            currentScaledWidth < canvas.width ||
            currentScaledHeight < canvas.height
          ) {
            const scaleToFit = Math.min(
              canvas.width / this.img.naturalWidth,
              canvas.height / this.img.naturalHeight
            );
            this.imgScale = Math.max(this.imgScale, scaleToFit);
          }

          const scaledWidth = this.img.naturalWidth * this.imgScale;
          const scaledHeight = this.img.naturalHeight * this.imgScale;

          // 计算缩放后的图片宽高
          // const scaledWidth = this.imgWidth * this.imgScale;
          // const scaledHeight = this.imgHeight * this.imgScale;

          // 计算图片在画布上的偏移量
          const xOffset = (canvas.width - scaledWidth) / 2;
          const yOffset = (canvas.height - scaledHeight) / 2;

          // 绘制图片
          // ctx.drawImage(
          //   img,
          //   xOffset - 40,
          //   yOffset - 37,
          //   scaledWidth,
          //   scaledHeight
          // );
          ctx.drawImage(img, xOffset, yOffset, scaledWidth, scaledHeight);

          // 定义固定的边距和文本参数
          const margin = 150; // 从画布边缘的边距
          const textHeight = 12; // 文本高度
          const verticalSpacing = 5; // 文本之间的垂直间隔
          const textMargin = 20; // 文本与边缘的距离

          //
          // 记录所有标记的位置和文本
          this.leftMarkers = [];
          this.rightMarkers = [];
          // let colors = '#59E000';
          // let color = [
          //   '#59E000',
          //   '#00E0B3',
          //   '#2F8CEA',
          //   '#F56200',
          //   '#FFBD79',
          //   '#B788E4',
          //   '#FF8486',
          //   // '#65FF00',
          //   // '#409EFF',
          // ];
          // // 定制颜色
          // this.markers.forEach((item) => {
          //   const itemsArray = item.medicineAtlasImgId.split(',').map(Number);
          //   if (itemsArray.includes(this.dcomid)) {
          //     item.bsdata.forEach((marker) => {
          //       this.options.forEach((itemcolor, index) => {
          //         if (
          //           itemcolor.anatomicStructureName ==
          //           marker.anatomicStructureName
          //         ) {
          //           colors = color[index % color.length];
          //           marker.color = colors;
          //           // console.log('定制颜色', marker);
          //         }
          //       });
          //     });
          //   }
          // });

          // 分离左右标记
          this.markers.forEach((item) => {
            const itemsArray = item.medicineAtlasImgId.split(',').map(Number);
            if (itemsArray.includes(this.dcomid)) {
              item.bsdata.forEach((marker) => {
                // 计算标记的 x 和 y 坐标
                const markerX = marker.x * this.imgScale + xOffset;
                const markerY = marker.y * this.imgScale + yOffset;

                // 划分左右位置数组保存
                if (markerX < canvas.width / 2) {
                  if (this.leftMarkers.length > 23) {
                    this.leftMarkers.push(marker);
                  } else {
                    marker.lintextshow = true;
                    this.leftMarkers.push(marker);
                  }
                } else {
                  if (this.rightMarkers.length > 23) {
                    marker.lintextshow = false;
                    this.rightMarkers.push(marker);
                  } else {
                    marker.lintextshow = true;
                    this.rightMarkers.push(marker);
                  }
                }

                // 绘制标记点
                if (marker.flag) {
                  ctx.fillStyle =
                    marker == this.hoveredMarker
                      ? '#409EFF'
                      : '#' + marker.color;
                  ctx.beginPath();
                  ctx.arc(markerX, markerY, this.pointSize / 3, 0, 2 * Math.PI);
                  ctx.fill();
                }
              });
            }
          });

          // 排序标记位置从上到下
          this.leftMarkers.sort((a, b) => a.y - b.y);
          this.rightMarkers.sort((a, b) => a.y - b.y);

          // 计算可用的文本区域
          const totalTextHeight =
            this.leftMarkers.length * (textHeight + verticalSpacing) -
            verticalSpacing; //总共文本高度
          const availableHeight = canvas.height - 2 * textMargin;
          const startY = Math.max(
            textMargin,
            (availableHeight - totalTextHeight) / 2 + textMargin
          );

          // 计算每个文本的纵向位置 存放位置需要修改
          this.leftMarkers.forEach((marker, index) => {
            marker.textY = startY + index * (textHeight + verticalSpacing);
          });
          this.rightMarkers.forEach((marker, index) => {
            marker.textY = startY + index * (textHeight + verticalSpacing);
          });
          // 定义最大允许的文本高度
          const maxTextY = 550 - 2 * textHeight; // 减去文本高度确保文本不会超出边界

          // 计算每个文本的纵向位置，并检查是否超出最大允许高度
          let yPosition = startY;
          this.leftMarkers.forEach((marker, index) => {
            if (yPosition > maxTextY) {
              // 如果当前位置超出最大允许高度，则停止进一步添加文本
              // marker.textY = null; // 不显示文本

              if (marker == mbmarker) {
                marker.lintextshow = true;
                this.leftMarkers[0].lintextshow = false;

                marker.textY = this.leftMarkers[0].textY;
              } else {
                marker.lintextshow = false;
              }
            } else {
              // 设置文本的纵向位置
              if (marker.flag) {
                marker.textY = yPosition;
                marker.lintextshow = true;
                yPosition += textHeight + verticalSpacing;
              }
            }
          });
          // console.log('更改后的数据', leftMarkers);

          yPosition = startY;

          this.rightMarkers.forEach((marker, index) => {
            if (yPosition > maxTextY) {
              // console.log('检测到大于高度', mbmarker);

              // 如果当前位置超出最大允许高度，则停止进一步添加文本
              // marker.textY = null; // 不显示文本
              if (marker == mbmarker) {
                marker.lintextshow = true;
                this.rightMarkers[0].lintextshow = false;

                marker.textY = this.rightMarkers[0].textY;
              } else {
                marker.lintextshow = false;
              }
            } else {
              // 设置文本的纵向位置
              if (marker.flag) {
                marker.textY = yPosition;
                marker.lintextshow = true;
                yPosition += textHeight + verticalSpacing;
              }
            }
          });

          // 绘制文本和线条
          this.leftMarkers.forEach((marker) => {
            const { text, textY } = marker;
            const markerX = marker.x * this.imgScale + xOffset;
            const markerY = marker.y * this.imgScale + yOffset;
            const textX = margin;
            //  const textX = canvas.width - margin + textMargin;

            // 绘制线条

            // console.log('左侧判断', marker, this.hoveredMarker);
            if (marker.lintextshow && marker.flag) {
              ctx.strokeStyle =
                marker == this.hoveredMarker ? '#409EFF' : '#' + marker.color;

              ctx.lineWidth = 1.5;
              ctx.beginPath();
              ctx.moveTo(markerX, markerY);

              // 确定线条结束点
              const lineEndX = Math.max(textX, margin);
              ctx.lineTo(lineEndX, textY);
              ctx.stroke();

              // 绘制文本

              ctx.fillStyle =
                marker == this.hoveredMarker ? '#409EFF' : '#' + marker.color;
              // ctx.globalAlpha = marker == this.hoveredMarker ? '1' : '0.5';
              // 右对齐文本
              // 右对齐文本
              ctx.textAlign = 'right';
              ctx.font = `${textHeight}px Arial`;
              ctx.fillText(text, textX, textY);
              this.markers.forEach((item) => {
                const itemsArray = item.medicineAtlasImgId
                  .split(',')
                  .map(Number);

                if (itemsArray.includes(this.dcomid)) {
                  item.bsdata.forEach((markers) => {
                    if (markers.markingPointsId == marker.markingPointsId) {
                      markers.textX = textX;
                      markers.textY = textY;
                    }
                  });
                }
              });
            }
          });

          this.rightMarkers.forEach((marker) => {
            const { text, textY } = marker;
            const markerX = marker.x * this.imgScale + xOffset;
            const markerY = marker.y * this.imgScale + yOffset;
            const textX = canvas.width - margin;

            if (marker.lintextshow && marker.flag) {
              // 绘制线条
              ctx.strokeStyle =
                marker == this.hoveredMarker ? '#409EFF' : '#' + marker.color;
              ctx.lineWidth = 1.5;
              ctx.beginPath();
              ctx.moveTo(markerX, markerY);

              // 确定线条结束点
              const lineEndX = Math.min(textX, canvas.width - margin);
              ctx.lineTo(lineEndX, textY);
              ctx.stroke();

              // 绘制文本

              ctx.fillStyle =
                marker == this.hoveredMarker ? '#409EFF' : '#' + marker.color;
              ctx.textAlign = 'left';
              ctx.font = `${textHeight}px Arial`;
              ctx.fillText(text, textX, textY);
              this.markers.forEach((item) => {
                const itemsArray = item.medicineAtlasImgId
                  .split(',')
                  .map(Number);

                if (itemsArray.includes(this.dcomid)) {
                  item.bsdata.forEach((markers) => {
                    if (markers.markingPointsId == marker.markingPointsId) {
                      markers.textX = textX;
                      markers.textY = textY;
                    }
                  });
                }
              });
              // console.log('绘制当前文字的位置', textX, textY);
            }
          });

          // 新增时标记点绘制
          if (
            this.currentMarker &&
            !this.editingMarker &&
            this.currentText === '' &&
            this.addflag
          ) {
            const { x, y } = this.currentMarker;
            const markerX = x * this.imgScale + xOffset;
            const markerY = y * this.imgScale + yOffset;

            // 绘制新标记点
            ctx.fillStyle = this.pointColor;
            ctx.beginPath();
            ctx.arc(markerX, markerY, this.pointSize / 2, 0, 2 * Math.PI);
            ctx.fill();

            if (this.showLinesAndText) {
              // 确定线条的结束点
              let lineEndX =
                markerX < canvas.width / 2 ? margin : canvas.width - margin;
              let lineEndY = markerY;

              // 绘制线条
              // ctx.strokeStyle = this.pointColor;
              // ctx.lineWidth = 1.5;
              // ctx.beginPath();
              // ctx.moveTo(markerX, markerY);
              // ctx.lineTo(lineEndX, lineEndY);
              // ctx.stroke();
            } else {
              // 如果不显示线条和文本
              ctx.beginPath();
              ctx.moveTo(markerX, markerY);
              ctx.lineTo(markerX - 10, markerY - 20);
              ctx.lineTo(markerX + 10, markerY - 20);
              ctx.closePath();
              ctx.fill();
            }
          }
        }
        //
        // console.log('左右两侧数组', this.markers);
      },

      // 保存标记到本地缓存
      saveMarkers() {
        // localStorage.setItem('markers', JSON.stringify(this.markers));
      },
      // 加载本地缓存的标记
      loadMarkers() {
        const cachedMarkers = localStorage.getItem('markers');
        if (cachedMarkers) {
          this.markers = JSON.parse(cachedMarkers);
          this.draw();
        }
      },
      // 清除本地缓存
      clearCache() {
        localStorage.removeItem('markers');
        this.markers = [];
        this.draw();
      },
      // 切换显示旗标和文本
      toggleLinesAndText() {
        this.showLinesAndText = !this.showLinesAndText;
        this.draw();
      },

      // 切换图像的时候处理 相关联的解刨结构
      anatomicStructurefn() {
        this.anatomicStructure = [];

        this.optionsdata.forEach((items) => {
          this.markers.some((item) => {
            if (!item.medicineAtlasImgId) {
              return;
            }

            const itemsArray = item.medicineAtlasImgId.split(',').map(Number);
            if (itemsArray.includes(this.dcomid)) {
              item.bsdata.forEach((itemd) => {
                if (itemd.anatomicStructureId == items.anatomicStructureId) {
                  // 先检查是否已存在
                  const exists = this.anatomicStructure.some(
                    (a) => a.anatomicStructureId === items.anatomicStructureId
                  );

                  if (!exists) {
                    this.anatomicStructure.push(items);
                  }
                }
              });
            }
            return false;
          });
        });
      },
      // 点击切换图像
      tagdcom(i) {
        this.anatomicStructurefn();
        // this.allflag = true;
        // this.optionsdata.forEach((jg) => {
        //   jg.flag = true;
        // });
        // this.markers.forEach((maker) => {
        //   maker.bsdata.forEach((bsitem) => {
        //     bsitem.flag = true;
        //   });
        // });
        // &&this.imgclass.includes(item.imgClassificationName);
        // console.log('当前图片id', i);

        const imgsrcd = this.imgsrc.find(
          (item) => item.medicineAtlasImgId == i
        );

        this.dcomid = i;
        this.img = new Image();
        this.img.onload = () => {
          this.imgWidth = this.img.width;
          this.imgHeight = this.img.height;
          // console.log('图片信息', this.imgWidth, this.imgHeight);
        };

        this.img.src = this.base + imgsrcd.imgUrl;
        this.draw();
      },
      // 处理鼠标滚轮事件
      handleWheel(e) {
        // 阻止默认滚动行为
        e.preventDefault();

        // 根据滚轮调整dcom图像
        if (e.deltaY < 0) {
          if (this.dcomid > 1) {
            // 先查询当前id
            const index = this.imgsrc.findIndex(
              (item) => item.medicineAtlasImgId == this.dcomid
            );

            if (this.imgsrc[index - 1]) {
              this.dcomid = this.imgsrc[index - 1].medicineAtlasImgId;
              this.tagdcom(this.dcomid);
              this.draw();
            }
          }
        } else {
          const index = this.imgsrc.findIndex(
            (item) => item.medicineAtlasImgId == this.dcomid
          );

          if (this.imgsrc[index + 1].medicineAtlasImgId != undefined) {
            this.dcomid = this.imgsrc[index + 1].medicineAtlasImgId;
            // console.log('切换后图像id', this.dcomid);
            this.tagdcom(this.dcomid);
            this.draw();
          }
        }

        // 更新画布
        this.draw();
      },
      goback() {
        this.$emit('goback');
      },
      getPoints() {
        getPointnew({
          medicineAtlasId: this.medicineAtlasId,
          pageNum: 1,
          pageSize: 800,
        }).then((res) => {
          if (res.code == 200) {
            this.markers = [];
            this.saveMarkers();
            console.log('查询解刨点测试', res.data);
            const markersMap = new Map(
              this.markers.map((marker) => [marker.medicineAtlasImgId, marker])
            );

            for (const items of res.data) {
              try {
                if (items.medicineAtlasImgId != null) {
                  const existingMarker = markersMap.get(
                    items.medicineAtlasImgId
                  );
                  const markingPointsObjects = JSON.parse(items.markingPoints);
                  markingPointsObjects.medicineAtlasImgId =
                    items.medicineAtlasImgId;

                  markingPointsObjects.bsdata[0].markingPointsId =
                    items.markingPointsId;
                  markingPointsObjects.bsdata[0].flag = true;
                  markingPointsObjects.bsdata[0].anatomicStructureName =
                    items.anatomicStructureName;
                  markingPointsObjects.bsdata[0].anatomicStructureId =
                    items.anatomicStructureId;

                  if (existingMarker) {
                    existingMarker.bsdata.push(...markingPointsObjects.bsdata);
                  } else {
                    markersMap.set(
                      items.medicineAtlasImgId,
                      markingPointsObjects
                    );
                  }
                }
              } catch (error) {
                console.error('Error processing item:', items, error);
              }
            }

            // 更新 state.markers
            this.markers = Array.from(markersMap.values());

            // 确保数据不为空
            if (this.markers.length === 0) {
              console.error('Final markers array is empty. Check input data.');
            } else {
              console.log('Final markers:', this.markers);
            }

            // console.log('打印获取的点位数据', state.markers);

            this.draw();
            this.loding = false;
          }
        });
      },
    },
    mounted() {
      console.log('接收到数据', this.imgsrc, this.imgclassdata);
      console.log(
        '测试',
        this.$refs.box.offsetHeight,
        this.$refs.box.offsetWidth
      );
      this.hbheight = this.$refs.box.offsetHeight;
      this.hbwidth = this.$refs.box.offsetWidth;
      this.canvas = document.getElementById('myCanvasadmin');
      this.ctx = this.canvas.getContext('2d');
      this.img = new Image();
      // console.log('加载一下图片', ())

      this.img.src = this.base + this.imgsrc[0].imgUrl;
      this.img.onload = () => {
        this.imgWidth = this.img.width;
        this.imgHeight = this.img.height;
        this.loadMarkers();
        this.draw();
      };

      // 事件绑定
      this.canvas.onmousemove = (e) => this.handleMouseMove(e);
      this.canvas.addEventListener('click', (e) => this.handleCanvasClick(e));
      // 添加滚轮事件监听器
      this.canvas.addEventListener('wheel', this.handleWheel);
      this.loding = true;

      getPointnew({
        medicineAtlasId: this.medicineAtlasId,
        pageNum: 1,
        pageSize: 800,
      }).then((res) => {
        if (res.code == 200) {
          this.markers = [];
          this.saveMarkers();
          console.log('查询解刨点测试', res.data);
          const markersMap = new Map(
            this.markers.map((marker) => [marker.medicineAtlasImgId, marker])
          );

          for (const items of res.data) {
            try {
              if (items.medicineAtlasImgId != null) {
                const existingMarker = markersMap.get(items.medicineAtlasImgId);
                const markingPointsObjects = JSON.parse(items.markingPoints);
                markingPointsObjects.medicineAtlasImgId =
                  items.medicineAtlasImgId;

                markingPointsObjects.bsdata[0].markingPointsId =
                  items.markingPointsId;
                markingPointsObjects.bsdata[0].flag = true;
                markingPointsObjects.bsdata[0].anatomicStructureName =
                  items.anatomicStructureName;
                markingPointsObjects.bsdata[0].anatomicStructureId =
                  items.anatomicStructureId;

                if (existingMarker) {
                  existingMarker.bsdata.push(...markingPointsObjects.bsdata);
                } else {
                  markersMap.set(
                    items.medicineAtlasImgId,
                    markingPointsObjects
                  );
                }
              }
            } catch (error) {
              console.error('Error processing item:', items, error);
            }
          }

          // 更新 state.markers
          this.markers = Array.from(markersMap.values());

          // 确保数据不为空
          if (this.markers.length === 0) {
            console.error('Final markers array is empty. Check input data.');
          } else {
            console.log('Final markers:', this.markers);
          }

          // console.log('打印获取的点位数据', state.markers);
          // 获取一下解刨结构数据
          jpList({
            medicineAtlasId: this.medicineAtlasId,
            pageNum: 1,
            pageSize: 999,
          }).then((res) => {
            if (res.code == 200) {
              console.log('查询解刨数据成功', res.data.list);
              this.optionsdata = res.data.list.map((item) => {
                return { ...item, flag: true }; // 为每个对象添加 flag 属性
              });
              // 给结构添加属性来绑定

              this.anatomicStructurefn();
            }
          });
          this.draw();
          this.loding = false;
        }
      });
    },
    created() {
      var that = this;
      this.editorConfig.placeholder = '请输入使用说明内容...';
      this.editorConfig.MENU_CONF['uploadImage'] = {
        timeout: 5 * 1000, // 5s

        fieldName: 'image',
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': 'Bearer ' + localStorage.getItem('token'),
        },
        maxFileSize: 10 * 1024 * 1024, // 10M

        base64LimitSize: 5 * 1024, // 5kb 以下插入 base64

        onBeforeUpload(files) {
          return files; // 返回哪些文件可以上传
          // return false 会阻止上传
        },
        onProgress(progress) {
          console.log('onProgress', progress);
        },
        onSuccess(file, res) {
          console.log('onSuccess', file, res);
        },
        onFailed(file, res) {
          alert(res.message);
          console.log('onFailed', file, res);
        },
        onError(file, err, res) {
          alert(err.message);
          console.error('onError', file, err, res);
        },

        // 用户自定义上传图片
        customUpload(file, insertFn) {
          console.log('走了自定义图片上传接口', file);
          let formData = new FormData();
          formData.append('file', file);
          addimg(formData).then((res) => {
            if (res.code == 200) {
              let url = window.config.VUE_APP_IMG_API + res.data; //拼接成可浏览的图片地址
              insertFn(url, '使用说明', url); //插入图片
              console.log('上传成功', res.data);
            }
          });
        },
      };
    },
    beforeDestroy() {
      // 事件解绑
      this.canvas.removeEventListener('mousemove', this.handleMouseMove);
      this.canvas.removeEventListener('click', this.handleCanvasClick);
      this.canvas.removeEventListener('wheel', this.handleWheel);
      const editor = this.editor;
      if (editor == null) return;
      editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
  };
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
  .mainboxgj {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: black;
  }

  #myCanvasadmin {
    /* border: solid 1px #00ff80; */
    background-color: black;
  }
  .bannerboxs {
    width: auto;
    height: 13%;
    border-bottom: 1px solid #5a5a5a;
    /* height: 50px; */
    line-height: 50px;
    padding: 10px 20px;
    background: #24292d;
    display: flex;
    align-items: center;
    color: #ffffff;
  }
  .bakcks {
    padding: 0px 10px;
    height: 32px;
    background: linear-gradient(180deg, #f4f4f4 0%, #a2a2a2 100%);
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: black;
    margin: 0px 10px;
  }
  .bakck {
    width: 50px;
    height: 32px;
    background: linear-gradient(180deg, #f4f4f4 0%, #a2a2a2 100%);
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: black;
  }
  .yxdesboxs {
    padding: 0px 10px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bannertitlebox {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
  }
  .boxs {
    /* background-color: #fff; */
    width: auto;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    display: flex;
  }
  .adddw {
    width: 130px;
    height: 35px;
    background: #409eff;
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    /* position: absolute;
    left: 21px;
    top: 20px; */
  }
  .box {
    /* margin: 0px auto; */
    /* background-color: black; */
    /* 480 606 */
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative; /* 使 canvas 可以完全覆盖 .box */
  }
  .symain {
    width: 100%;
    height: 100%;
    /* position: relative; */
  }
  .bocd {
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 100%;
    border-left: 1px solid #5a5a5a;
  }

  .lbox {
    /* width: 1660px; */
    width: 100%;
    background: black;
    /* height: 70px; */
    display: flex;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: auto;
    margin-left: 0px;
  }

  .lboxitem {
    width: 70px;
    height: 70px;
    cursor: pointer;
    position: relative;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lboxitem img {
    width: 50px;
    height: 50px;
  }

  .msx {
    height: 100px;
    width: 2px;
    background-color: #409eff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .edit-panel {
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
  }

  .lbox::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .lbox::-webkit-scrollbar-track {
    width: 6px;
    background: rgba(#101f1c, 0.1);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .lbox::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color 0.3s;
    cursor: pointer;
  }

  .lbox::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.3);
  }
  .yxdesbox {
    margin: 0 10px;
  }

  .gncd button {
    margin: 0 10px;
  }
  .boxmain {
    /* 80%; */
    height: 654px;
    display: flex;
    background-color: black;
  }
  .gnbocd {
    height: 80%;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: black;
    /* border-bottom: 2px solid #5a5a5a; */
    display: flex;
    flex-direction: column;
  }
  .gnbocdname {
    font-size: 20px;
    color: #ffffff;
    padding: 10px;
  }
  .gnboxmain {
    padding: 0 15px;
    height: 603px;
    overflow: hidden;
    overflow-y: scroll;
  }
  .gnboxitem {
    height: 40px;
    background: #24292d;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 12px;
    margin: 10px 0;
  }
  .jgdovx {
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .gnbottom {
    width: 100%;
    height: 10%;
    background-color: #24292d;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
  }
  /* 公共类 */
  /* 封装公共按钮类 */
  .tool {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tool img.active {
    cursor: pointer;
    display: none;
  }

  .tool:hover img.normal,
  .tool.active img.normal {
    display: none;
  }

  .tool:hover img.active,
  .tool.active img.active {
    display: block;
  }
  .mentox {
    width: 200px;
    height: 50px;
    background: #121419;
    border-radius: 6px 6px 6px 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    margin: 0 13px;
  }
  .mentox span {
    display: block;
    font-weight: bold;
    font-size: 24px;
    margin-left: 10px;
    word-spacing: 20px;
  }
  .lboxmain {
    height: 10%;
    display: flex;
  }
  .gnbocdtop {
    height: 10%;
    background-color: black;
    border-bottom: 2px solid #5a5a5a;
    display: flex;

    justify-content: center;
    padding: 20px 7px;
  }
  .xugn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }
  .xugname {
    width: 80px;
    color: #fff;
  }
  .mainleftbox {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%;
  }
  /* 滚动条美化 */
  .beautifulScroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666666;
  }
  .loader-container {
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 99;
  }

  .loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  p {
    font-family: Arial, sans-serif;
    color: #fff;
    font-size: 16px;
    margin-top: 10px;
  }
</style>
